<template>
   
    <div class="head" style="margin-bottom: 10px;margin-top: 10px;">
     <el-button type="danger" style="right: 1000px;position: relative;" @click="batchDel">批量删除</el-button>
     <el-button type="primary" @click="insertOne">新增标签</el-button>
    </div>
    
    <el-table :data="tableData" border style="width: 100%;height: 600px;" stripe 
     ref="multipleTableRef"
     @selection-change="handleSelectionChange">
     <el-table-column type="selection" width="55" />
     <el-table-column prop="tag" label="标签名称" width="180" />
     <el-table-column  label="操作" >
         <template #default="scope">
          <el-button type="primary" @click="updateOne(scope.$index,scope.row)">修改</el-button>
          <el-button type="danger" @click="deleteOne(scope.$index,scope.row)">删除</el-button>
         
         </template>
     </el-table-column>
    </el-table>
 
 
  
    <!-- 新增标签对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="title">
     <el-form :model="form">
       <el-form-item label="标签名称" :label-width="formLabelWidth">
         <el-input v-model="form.tag" autocomplete="off" placeholder="请输入标签名称" />
       </el-form-item> 
     </el-form>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="quexiao">取消</el-button>
         <el-button type="primary" @click="addOne">
           确定
         </el-button>
       </span>
     </template>
   </el-dialog>
 
 <!-- 删除对话框 -->
 <el-dialog
     v-model="centerDialogVisible"
     title="删除标签"
     width="30%"
     align-center
   >
     <span>你确定要删除该标签吗?</span>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="centerDialogVisible = false">取消</el-button>
         <el-button type="primary" @click="deleteCate">
           确定
         </el-button>
       </span>
     </template>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
 
 import { ref ,onMounted} from 'vue'
 import { ElTable } from 'element-plus'
 import {ElMessage} from 'element-plus'
 import tagApi from '@/api/tag';


 
 
 
 //多选功能
 const multipleTableRef = ref<InstanceType<typeof ElTable>>()
 const multipleSelection = ref<[]>([])
 const toggleSelection = (rows?: []) => {
   if (rows) {
     rows.forEach((row) => {
       // TODO: improvement typing when refactor table
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       multipleTableRef.value!.toggleRowSelection(row, undefined)
     })
   } else {
     multipleTableRef.value!.clearSelection()
   }
 }
 const handleSelectionChange = (val:[]) => {
    multipleSelection.value = val
 }
 
 //获取口味数据
 onMounted(()=>{
   getFlavours()
 })
 
 async function getFlavours() {
    const data = await tagApi.getTags()
    if(data.code === 200){
        tableData.value = data.data;
    }else{
        ElMessage({"message":data.data,"type":"error"})
    }}
 
 
 
 const tableData = ref([])
 
 //新增或者修改的标题
 const title = ref('新增标签')
 
 
 //新增菜品对话框
 const dialogFormVisible = ref(false)
 const formLabelWidth = '140px'
 //口味表单
 const form = ref({
    id:0,
    tag:''
 })
 
 const insertOne=()=>{
   dialogFormVisible.value = true;
   title.value = '新增标签'
 }
 //新增或修改口味
 const addOne=async ()=>{
    //如果是新增
     if(title.value==='新增标签'){
       const data = await tagApi.addTag(form.value.tag)
       if(data.code===200){
        ElMessage({"message":data.data,"type":"success"})
        getFlavours()
       }else{
        ElMessage({"message":data.data,"type":"error"})
       }
     }else{
       //修改口味
       const data = await tagApi.updateTag(form.value)
       if(data.code===200){
        ElMessage({"message":data.data,"type":"success"})
        getFlavours()
       }else{
        ElMessage({"message":data.data,"type":"error"})
       }
     }
     dialogFormVisible.value = false
     form.value.tag = ''
 }
 //取消新增
 const quexiao=()=>{
     dialogFormVisible.value = false
     form.value.tag = ''
 }
 //编辑按钮
 const updateOne=(index:number,row:any)=>{
      title.value = '修改标签'
      dialogFormVisible.value = true;
      form.value.id = tableData.value[index].id
      form.value.tag = tableData.value[index].tag
 }



 //删除分类
 //要删除的数据(表格的索引)临时先保存一下
 const delIndexs = ref([0])
 const centerDialogVisible = ref(false)
 const delOneOrAll = ref(false) //默认是删除一个
 const deleteOne=(index:number,row:any)=>{
     centerDialogVisible.value = true;
     //给delIndexs赋值
     delIndexs.value[0] = tableData.value[index].id
 }
 //批量删除按钮
  const batchDel=()=>{
    centerDialogVisible.value = true
    delOneOrAll.value = true
  }
 
 
 //批量删除
 const deleteCate = async ()=>{
    var ids: any[] = []
     if(delOneOrAll.value===false){
         ids = delIndexs.value
     }else{
         multipleSelection.value.forEach(item =>{
            ids.push(item.id)
         })
     }
     //然后删除
     const data = await tagApi.deleteTags(ids)
     if(data.code===200){
       ElMessage({"message":data.data,"type":"success"})
       getFlavours()
     }else{
       ElMessage({"message":data.data,"type":"warning"})
     }
     centerDialogVisible.value = false
    
 }
 


 
 //排序
 const sort=(index:number)=>{
   
   
 }
 
 
    
 
 
 
  
    
    
  
 
 
 
 
 
 
 </script>
 
 
 <style scoped lang="less">
  .head{
     float: right;
  }
 .el-input{
     width: 400px;
     height: 40px;
 }
 </style>